<template>
    <div>
        

        出生地点:<select>
            <option value="">请选择</option>
            <option :value="item.id" v-for="item in city":Key="item.id">{{ item.name }}</option>
        </select>

        <table>
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>头像</td>
            </tr>
            <tr v-for="item in person":key="item.id">
                <td>{{ item.id }}</td>
                <td>{{item.name}}</td>
                <td><img :src="item.img" width="100px" height="100px"></td>
            </tr>

        </table>
        
    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';


let city=ref([
    {id:1,name:"河北"},
    {id:2,name:"河南"},
    {id:3,name:"山西"},
    {id:4,name:"山东"},
    {id:5,name:"湖南"},
    {id:6,name:"湖北"}
])

let person=ref([
    {id:1,name:"张三",img:"https://tse4-mm.cn.bing.net/th/id/OIP-C.AVNRI5JbJfFNCjBtYglv1wHaNK?rs=1&pid=ImgDetMain"},
    {id:2,name:"李四",img:"https://tse4-mm.cn.bing.net/th/id/OIP-C.AVNRI5JbJfFNCjBtYglv1wHaNK?rs=1&pid=ImgDetMain"},
    {id:3,name:"王五",img:"https://tse4-mm.cn.bing.net/th/id/OIP-C.AVNRI5JbJfFNCjBtYglv1wHaNK?rs=1&pid=ImgDetMain"},
])

</script>

<style scoped>

</style>